<template>
  <div class="py-6">
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900">员工工作台</h1>
      <p class="mt-1 text-sm text-gray-500">张三（技术支持）</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
              <i class="fa fa-file-text-o text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">总处理工单</h3>
              <p class="text-2xl font-semibold text-gray-900">42</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
              <i class="fa fa-check-circle-o text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">本月完成</h3>
              <p class="text-2xl font-semibold text-gray-900">16</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
              <i class="fa fa-clock-o text-yellow-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">处理中</h3>
              <p class="text-2xl font-semibold text-gray-900">3</p>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
          <div class="flex items-center">
            <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
              <i class="fa fa-star text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-sm font-medium text-gray-500">满意度</h3>
              <p class="text-2xl font-semibold text-gray-900">98%</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 待办事项 -->
    <div class="bg-white shadow rounded-lg mb-6">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">待处理工单</h2>
      </div>
      <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3">
            <div class="flex-shrink-0">
              <i class="fa fa-exclamation-circle text-2xl text-red-500"></i>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-gray-900">紧急工单</p>
              <p class="text-2xl font-semibold text-red-500">2</p>
            </div>
          </div>

          <div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3">
            <div class="flex-shrink-0">
              <i class="fa fa-warning text-2xl text-yellow-500"></i>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-gray-900">高优工单</p>
              <p class="text-2xl font-semibold text-yellow-500">5</p>
            </div>
          </div>

          <div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3">
            <div class="flex-shrink-0">
              <i class="fa fa-clock-o text-2xl text-blue-500"></i>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-gray-900">一般工单</p>
              <p class="text-2xl font-semibold text-blue-500">8</p>
            </div>
          </div>
        </div>
        <div class="mt-4 text-center">
          <router-link to="/staff/tickets" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none">
            查看所有待处理工单
          </router-link>
        </div>
      </div>
    </div>

    <!-- 个人绩效 -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
      <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">个人绩效</h2>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">近7天工作统计</p>
      </div>
      <div class="border-t border-gray-200">
        <div class="p-6">
          <div class="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
            <p class="text-gray-500">图表展示区域</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>